<template>
  <div class="container">
    <el-page-header @back="goBack" content="佣金设置"></el-page-header>

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="e-m-t-45">
      <el-tab-pane label="用户" name="1"></el-tab-pane>
      <el-tab-pane label="客户组" name="2"></el-tab-pane>
      <el-tab-pane label="小哥" name="3"></el-tab-pane>
      <el-tab-pane label="业务员" name="6"></el-tab-pane>
    </el-tabs>
    <el-form ref="form" :model="form" label-width="110px" class="views-form">
      <el-form-item label="推广入口:">
        <el-radio-group v-model="form.openentry">
          <el-radio :label="false">关闭</el-radio>
          <el-radio :label="true">打开</el-radio>
        </el-radio-group>
        <span class="tips e-p-l-45">此设置仅控制前端是否显示推广入口，不影响返佣设置生效</span>
      </el-form-item>
      <el-form-item label="注册:">
        <span>每人返佣</span>
        <el-input v-model="form.regamount" placeholder="请输入数字" class="e-w-200" type="number">
          <template slot="append">元</template>
        </el-input>
        <el-select v-model="form.reglimitcycle" class="e-w-100" placeholder="请选择">
          <el-option label="每日" value="每日"></el-option>
          <el-option label="每月" value="每月"></el-option>
          <el-option label="每年" value="每年"></el-option>
        </el-select>
        <span class="e-m-l-10">超过</span>
        <el-input v-model="form.reglimit" placeholder="请输入数字" class="e-m-l-10 e-w-160" type="number">
          <template slot="append">
            <el-select v-model="form.reglimittype" class="e-w-65" placeholder="请选择">
              <el-option label="元" value="元"></el-option>
              <el-option label="人" value="笔数"></el-option>
            </el-select>
          </template>
        </el-input>
        <span class="e-m-l-10">启用人工审核</span>
      </el-form-item>
      <el-form-item label="首单:">
        <span>每单返佣</span>
        <el-input v-model="form.firstorderamount" placeholder="请输入数字" class="e-m-l-10 e-w-200" type="number">
          <template slot="append">
            <el-select v-model="form.firstorderisratio" class="e-w-65" placeholder="请选择">
              <el-option value="元"></el-option>
              <el-option value="%"></el-option>
            </el-select>
          </template>
        </el-input>
        <el-select v-model="form.firstlimitcycle" class="e-w-100" placeholder="请选择">
          <el-option label="每日" value="每日"></el-option>
          <el-option label="每月" value="每月"></el-option>
          <el-option label="每年" value="每年"></el-option>
        </el-select>
        <span class="e-m-l-10">超过</span>
        <el-input v-model="form.firstlimit" placeholder="请输入数字" class="e-m-l-10 e-w-160" type="number">
          <template slot="append">
            <el-select v-model="form.firstlimittype" class="e-w-65" placeholder="请选择">
              <el-option label="元" value="元"></el-option>
              <el-option label="单" value="笔数"></el-option>
            </el-select>
          </template>
        </el-input>
        <span class="e-m-l-10">启用人工审核</span>

      </el-form-item>
      <el-form-item label="后续订单:">
        <span>每单返佣</span>
        <el-input v-model="form.orderamount" placeholder="请输入数字" class="e-m-l-10 e-w-200" type="number">
          <template slot="append">
            <el-select v-model="form.orderisratio" class="e-w-65" placeholder="请选择">
              <el-option value="元"></el-option>
              <el-option value="%"></el-option>
            </el-select>
          </template>
        </el-input>
        <span class="e-m-l-10">每年递减</span>
        <el-input v-model="form.orderdecrementamount" placeholder="请输入数字" class="e-m-l-10 e-w-200" type="number">
          <template slot="append">{{ form.orderisratio}}</template>
        </el-input>
        <span class="e-m-l-10">最低佣金</span>
        <el-input v-model="form.orderminamount" placeholder="请输入数字" class="e-m-l-10 e-w-200" type="number">
          <template slot="append">{{form.orderisratio}}</template>
        </el-input>
        <div class="flex align-items-center">
        </div>
      </el-form-item>
      <el-form-item>
        <el-select v-model="form.retrievelimitcycle" class="e-w-100" placeholder="请选择">
          <el-option label="每日" value="每日"></el-option>
          <el-option label="每月" value="每月"></el-option>
          <el-option label="每年" value="每年"></el-option>
        </el-select>
        <span class="e-m-l-10">超过</span>
        <el-input v-model="form.retrievelimit" placeholder="请输入数字" class="e-m-l-10 e-w-160" type="number">
          <template slot="append">
            <el-select v-model="form.retrievelimittype" class="e-w-65" placeholder="请选择">
              <el-option label="元" value="元"></el-option>
              <el-option label="单" value="笔数"></el-option>
            </el-select>
          </template>
        </el-input>
        <span class="e-m-l-10">启用人工审核</span>
      </el-form-item>
      <el-form-item label="推广海报:">
        <cropper-upload :zoomScale='[1, 1]' :isCropper="false" @getUpload="handleFilesSuccess" class="avatar-uploader">
          <div v-if="form.poster">
            <img :src="fileURL + form.poster" style="display: block;">
            <div draggable="true" @dragstart="dragstart($event)" @dragend="dragend($event)"
              :style="{position:'absolute',border:'1px solid red',left:form.postercodeleft+'px',top:form.postercodetop+'px',width:form.postercodelength+'px',height:form.postercodelength+'px',background: '#fff',display: 'flex',alignItems: 'center',justifyContent: 'center'}">
              二维码位置
            </div>
          </div>
          <div class="avatar-uploader-icon" v-else="">
            <div><i class="el-icon-plus"></i></div>
            <div class="e-font-14">上传海报</div>
          </div>
        </cropper-upload>

        <span class="e-m-l-10">二维码边长</span>
        <el-input v-model="form.postercodelength" placeholder="请输入数字" class="e-m-l-10 e-w-200" type="number">
        </el-input>
        <span class="e-m-l-10">二维码距上</span>
        <el-input v-model="form.postercodetop" placeholder="请输入数字" class="e-m-l-10 e-w-200" type="number">
        </el-input>
        <span class="e-m-l-10">二维码距左</span>
        <el-input v-model="form.postercodeleft" placeholder="请输入数字" class="e-m-l-10 e-w-200" type="number">
        </el-input>
      </el-form-item>
      <el-form-item label="推广弹窗:">
        <cropper-upload :zoomScale='[1, 1]' :isCropper="false" @getUpload="myhandleFilesSuccess"
                        class="avatar-uploader">
                        <img v-if="form.promoterphoto" :src="fileURL + form.promoterphoto" class="avatar">
                        <div class="avatar-uploader-icon" v-else>
                            <div><i class="el-icon-plus"></i></div>
                            <div class="e-font-14">上传图片</div>
                        </div>
          </cropper-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存设置</el-button>
        <el-button @click="goBack">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    layout: 'admin',
    head() {
      return {
        title: '佣金设置-' + this.websetting.name
      }
    },
    data() {
      return {
        activeName: "1",
        form: {
          type: 1, //类型
          openentry:true,
          regamount: 0, //注册奖励金额
          reglimitcycle: "每日", //佣金自动审核注册限制周期
          reglimit: 0, //佣金自动审核注册限制
          reglimittype: "元", //佣金自动审核注册限制类型

          firstorderamount: 0, //首单奖励金额
          firstorderisratio: "元", //首单奖励是否百分比

          firstlimitcycle: "每日", //佣金自动审核首单限制周期
          firstlimit: 0, //佣金自动审核首单限制
          firstlimittype: "元", //佣金自动审核首单限制类型

          orderamount: 0, //后续订单奖励金额
          orderisratio: "元", //订单奖励是否百分比
          orderdecrementamount: 0, //订单奖励每年递减金额
          orderminamount: 0, //订单奖励最低金额
          retrievelimitcycle: "每日", //佣金自动审核回收限制周期
          retrievelimit: 0, //佣金自动审核回收限制
          retrievelimittype: "元", //佣金自动审核回收限制类型
          poster: "", //海报
          postercodetop: 0, //海报二维码距上
          postercodeleft: 0, //海报二维码距左
          postercodelength: 0, //海报二维码边长
          promoterphoto:''//推广邀请
        },
        pageX: 0,
        pageY: 0,
        details: {}
      }
    },
    mounted() {
      this.getsetting()
    },
    computed: {
      headers() {
        return this.$store.state.header
      }
    },
    methods: {
      myhandleFilesSuccess(res, file) {
            console.log(res,file)
            if (file.status === "success") {
                // this.loading = false
                this.form.promoterphoto = res.path
                this.$forceUpdate()
            }
    },
      goBack() {
        this.$router.go(-1)
      },
      changing(){
        switch (this.form.type) {
          case 1:
            this.form = this.details.user
            break;
          case 2:
            this.form = this.details.enterprise
            break;
          case 3:
            this.form = this.details.brother
            break;
          default:
            this.form = this.details.salesman
            break;
        }
      },
      handleClick(tab, event) {
        this.form.type = parseInt(tab.name);
        this.changing();
      },
      handleFilesSuccess(res, file) {
        if (file.status === "success") {
          this.form.poster = res.path
        }
      },
      dragstart(event) {
        this.pageX = parseFloat(event.pageX);
        this.pageY = parseFloat(event.pageY);

      },
      dragend(event) {
        this.form.postercodetop += parseFloat(event.pageY) - parseFloat(this.pageY);
        this.form.postercodeleft += parseFloat(event.pageX) - parseFloat(this.pageX);
      },
      getsetting() {
        this.$axios.get('/Admin/CommissionSetting/Details').then((res) => {
          res.user.firstorderisratio = res.user.firstorderisratio ? "%" : "元";
          res.user.orderisratio = res.user.orderisratio ? "%" : "元";
          res.enterprise.firstorderisratio = res.enterprise.firstorderisratio ? "%" : "元";
          res.enterprise.orderisratio = res.enterprise.orderisratio ? "%" : "元";
          res.brother.firstorderisratio = res.brother.firstorderisratio ? "%" : "元";
          res.brother.orderisratio = res.brother.orderisratio ? "%" : "元";
          res.salesman.firstorderisratio = res.salesman.firstorderisratio ? "%" : "元";
          res.salesman.orderisratio = res.salesman.orderisratio ? "%" : "元";
          console.log(this.form.type)
          if(this.form.type == '用户'){
            this.form.type = 1
          }
          if(this.form.type == '客户组'){
            this.form.type = 2
          }
          if(this.form.type == '小哥'){
            this.form.type = 3
          }
          if(this.form.type == '业务员'){
            this.form.type = 6
          }
          this.details = res;
          this.changing();
        })
      },
      onSubmit() {
        this.$axios.post('/Admin/CommissionSetting/Set', [{
          type: this.form.type, //类型
          openentry:this.form.openentry,
          regamount: this.form.regamount, //注册奖励金额
          reglimitcycle: this.form.reglimitcycle, //佣金自动审核注册限制周期
          reglimit: this.form.reglimit, //佣金自动审核注册限制
          reglimittype: this.form.reglimittype, //佣金自动审核注册限制类型
          firstorderamount: this.form.firstorderamount, //首单奖励金额
          firstorderisratio: this.form.firstorderisratio == '%', //首单奖励是否百分比
          firstlimitcycle: this.form.firstlimitcycle, //佣金自动审核首单限制周期
          firstlimit: this.form.firstlimit, //佣金自动审核首单限制
          firstlimittype: this.form.firstlimittype, //佣金自动审核首单限制类型
          orderamount: this.form.orderamount, //后续订单奖励金额
          orderisratio: this.form.orderisratio == '%', //订单奖励是否百分比
          orderdecrementamount: this.form.orderdecrementamount, //订单奖励每年递减金额
          orderminamount: this.form.orderminamount, //订单奖励最低金额
          retrievelimitcycle: this.form.retrievelimitcycle, //佣金自动审核回收限制周期
          retrievelimit: this.form.retrievelimit, //佣金自动审核回收限制
          retrievelimittype: this.form.retrievelimittype, //佣金自动审核回收限制类型
          poster: this.form.poster, //海报
          postercodetop: this.form.postercodetop, //海报二维码距上
          postercodeleft: this.form.postercodeleft, //海报二维码距左
          postercodelength: this.form.postercodelength, //海报二维码边长
          promoterphoto:this.form.promoterphoto
        }]).then((res) => {
          // this.$message.success(res.msg);
          this.$message.success("修改成功");
          this.getsetting()
        })
      }
    }
  }
</script>

<style lang="scss">
  .link-blue {
    color: var(--blue);
    text-decoration: underline;
    font-size: 12px;
    cursor: pointer;
  }
</style>
